<template>
  <div>
    <div class="background-img-css" :style="{ backgroundImage:'url(' + videoHomePageImg + ')' }" @click="clickHomePage()">
      <div class="title-name">
        <span class="title-text">{{ videoTitle }}</span>
        <span class="title-video-num">{{ displayVideoNum }}</span>
      </div>
      <subtitle :subtitle-img="this.subtitleImg" :subtitle-music="this.subtitleMusic"></subtitle>
    </div>
  </div>
</template>

<script>
import {getVideoTitleByVideoNum} from "../apis/sentenceController";
import Subtitle from "../components/Subtitle";
import {handleCurrentPageEnterEvent} from "@/utils/keyBoardUtil";

export default {
  name: "ChapterPage",
  components: {Subtitle},
  props: {
    chapterNumStr: String,
    videoNumStr: String,
    isStart: String
  },
  data() {
    return {
      pageNum: 1,
      videoHomePageImg: '',
      subtitleImg: '',
      subtitleMusic: ''
    }
  },
  created() {
    this.$bus.$on('goToNextPage', msg => {
      this.pageNum = msg;
      this.goToPptPage();
    })
  },
  mounted() {
    this.renderPPTData(this.chapterNum);
    handleCurrentPageEnterEvent(this.$route, 'videoHomePage', this.clickHomePage);
  },
  methods: {
    renderPPTData(chapterNum) {
      this.videoHomePageImg = require(`@/assets/pictures/videoHomePage/${chapterNum}/background.png`);
      this.subtitleImg = require(`@/assets/pictures/videoHomePage/${chapterNum}/subtitle.png`);
      this.subtitleMusic = require(`@/assets/pictures/videoHomePage/${chapterNum}/music.mp3`);
    },
    goToPptPage() {
      this.$router.push({path: `/pptPage/${this.chapterNum}/${this.videoNum}/${this.pageNum}`});
    },
    clickHomePage() {
      if (this.isStart === 'false') {
        return;
      }
      this.goToPptPage();
    }
  },
  computed: {
    videoTitle() {
      return getVideoTitleByVideoNum(this.chapterNum, this.videoNum);
    },
    displayVideoNum() {
      if (this.videoNum.toString().length === 1) {
        return `0${this.videoNum}`;
      }
      return this.videoNum;
    },
    chapterNum() {
      return parseInt(this.chapterNumStr);
    },
    videoNum() {
      return parseInt(this.videoNumStr);
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/scss/img";
@import "src/assets/scss/layout";
@import "src/assets/scss/color";

.title-name {
  @include position-abs-bottom(35%);
  background-color: $title-div-color;
  border: solid 3px $title-border-color;
  width: 1478px;
  height: 168px;
  display: flex;
  justify-content: center;
  user-select: none;
}

.title-text {
  font-size: 77px;
  color: lightyellow;
  padding: 22px;
  line-height: 115px;
  text-shadow: 6px 4px 8px black;
}

.title-video-num {
  font-size: 150px;
  line-height: 169px;
  font-weight: 700;
  color: lightyellow;
  border-left: solid 3px $title-border-color;
  padding-left: 20px;
  padding-right: 25px;
  text-shadow: 6px 4px 8px black;
}
</style>